<template>
  <div class="data-panel">
    <div class="panel-header">
      <img :src="headerImg" class="k-img-title" />
      <div class="header-box">
        <div>
          {{ getFormattedDate() }}
        </div>
        <div style="display: flex; align-items: center; height: 32px">
          <!-- <div>
            <img :src="tianqiImg" style="width: 63px; margin-right: 12px" />
          </div>
          <div>{{ "多云转晴  31℃" }}</div> -->
        </div>
      </div>
    </div>
    <div class="panel-left" ref="panelLeft">
      <OrgStructure></OrgStructure>
      <WorkMenu></WorkMenu>
      <DutyZone></DutyZone>
    </div>
    <div class="panel-right" ref="panelRight">
      <WorkflowStatus></WorkflowStatus>
      <BasicSetup></BasicSetup>
    </div>
    <div
      class="panel-model"
      :style="{
        left: FeatureIs.x + 'px',
        top: FeatureIs.y + 'px',
      }"
    >
      <PanelModel></PanelModel>
    </div>
  </div>

  <div class="mask"></div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { setMoveModel } from "../composables/useDataPanel.ts";
import { FeatureIs, initDataFn } from "../composables/useMapView.ts";
import headerImg from "../assets/images/title.svg";
import OrgStructure from "./leftPanel/OrgStructure.vue";
import WorkMenu from "./leftPanel/WorkMenu.vue";
import DutyZone from "./leftPanel/DutyZone.vue";
import WorkflowStatus from "./rightPanel/WorkflowStatus.vue";
import BasicSetup from "./rightPanel/BasicSetup.vue";
import PanelModel from "./PanelModel/PanelModel.vue";
onMounted(() => {
  setMoveModel();
  initDataFn();
});

function getFormattedDate() {
  const days = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  const months = [
    "1月",
    "2月",
    "3月",
    "4月",
    "5月",
    "6月",
    "7月",
    "8月",
    "9月",
    "10月",
    "11月",
    "12月",
  ];

  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth(); // 0 - 11
  const day = date.getDate();
  const dayOfWeek = date.getDay(); // 0 - 6

  const formattedDate = `${year}年${months[month]}${day}日 ${days[dayOfWeek]}`;
  return formattedDate;
}

const panelLeft = ref();
const panelRight = ref();
onMounted(() => {
  window.addEventListener("resize", function () {
    setWinSzie();
    // 这里可以添加其他逻辑，比如调整页面布局
  });
  setWinSzie();
});

const setWinSzie = () => {
  var height = window.innerHeight;
  console.log("窗口高度变化:", height);
  panelLeft.value.style.transform = "scale(" + window.innerHeight / 1080 + ")";
  panelRight.value.style.transform = "scale(" + window.innerHeight / 1080 + ")";
};
</script>

<style scoped lang="scss">
.data-panel {
  position: absolute;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  .panel-header {
    position: absolute;
    width: calc(100vw - 2px);
    height: 7.77vh;
    pointer-events: auto;
    .k-img-title {
      position: relative;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
    }
    .header-box {
      position: absolute;
      height: 24px;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      width: calc(100% - 20px);
      padding: 0.925vh;
      font-size: 1.85vh;
      color: aquamarine;
      align-items: flex-end;
    }
  }
  .panel-left {
    border: 1px solid rgb(45, 148, 108);
    position: absolute;
    width: 422px;
    left: 0;
    top: 8.77vh;
    height: 978px;
    transform-origin: left top;
    pointer-events: auto;
  }
  .panel-right {
    border: 1px solid rgb(45, 148, 108);
    position: absolute;
    width: 408px;
    right: 0;
    top: 8.77vh;
    height: 978px;
    pointer-events: auto;
    transform-origin: right top;
  }

  .panel-model {
    position: fixed;
    width: 400px;
    left: -900px;
    top: -900px;
    height: 340px;
    pointer-events: auto;
    cursor: move;
  }
}

.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.9),
    inset 458px 0 214px rgba(0, 0, 0, 0.9),
    inset -458px 0 214px rgba(0, 0, 0, 0.9),
    inset 1px 0px 103px 88px rgba(0, 0, 0, 0.9),
    inset 0 -20px 25px rgba(0, 0, 0, 0.9);
  z-index: 1;
  pointer-events: none;
}
</style>
